<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定</title>
    <script>
        window.onload = function () {

            var btn01 = document.getElementById('btn01');

            // 通过 对象.属性 的形式绑定响应函数时，同时只能为一个事件绑定一个响应函数
            // btn01.onclick = function () {
            //     alert(1);
            // };
            //
            btn01.onclick = function () {
                alert(2);
            };

            btn01.onclick = null;


            /*
                addEventListener()
                    - 也可以通过addEventListener()来为元素绑定事件
                        addEventListener(type, listener [, useCapture])
                    - 参数：
                        type 要监听的事件的字符串，注意这里不需要写on
                        listener 回调函数，当事件发生后调用的函数
                        useCapture 布尔值，是否在捕获阶段触发事件，一般都是false

                通过addEventListener()可以为一个元素的一个事件绑定多个响应函数，
                    这样当事件被触发时，响应函数会按照事件的绑定顺序依次执行
                该方法不支持IE8及以下的浏览器
             */
            // btn01.addEventListener("click",function () {
            //     alert(1);
            // }, false)
            //
            // btn01.addEventListener("click",function () {
            //     alert(2);
            // }, false)
            //
            // btn01.addEventListener("click",function () {
            //     alert(3);
            // }, false)

            // btn01.removeEventListener()
            /*
                removeEventListener(type, listener[, useCapture]);
                    - 用来移除元素上的事件监听器

             */

            function fn() {
                alert(123);
            }

            btn01.addEventListener('click',fn, false);
            btn01.removeEventListener('click', fn, false);


        };

    </script>
</head>
<body>

<button id="btn01">点我一下</button>

</body>
</html>